<template>
  <button
    ref="buttonRef"
    :class="
      cn(
        'group relative w-auto cursor-pointer overflow-hidden rounded-full border bg-background p-2 px-6 text-center font-semibold',
        props.class,
      )
    "
  >
    <div class="flex items-center gap-2">
      <span
        class="inline-block whitespace-nowrap transition-all duration-300 group-hover:-translate-x-12 group-hover:opacity-0"
      >
        {{ text }}
      </span>
      <div
        class="size-2 scale-100 rounded-lg bg-primary transition-all duration-300 group-hover:scale-[100.8]"
      ></div>
    </div>

    <div
  class="absolute top-0 left-0 right-0 z-10 flex size-full translate-x-[-110%] items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:translate-x-[-10%] group-hover:opacity-100"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="lucide lucide-arrow-left"
  >
    <path d="M19 12H5" />
    <path d="m12 19-7-7 7-7" />
  </svg>
  <span class="whitespace-nowrap">{{ text }}</span>
</div>
  </button>
</template>

<script setup>
import { cn } from '@/lib/utils';
import { ref } from 'vue';

const props = defineProps({
  text: { type: String, required: false, default: 'Button' },
  class: { type: String, required: false },
});

const buttonRef = ref();
</script>

<style></style>